<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纹理对象Texture阵列、偏移、旋转</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
    <link rel="stylesheet" href="common.css">
</head>

<body>

</body>
<script>
    let scene = new THREE.Scene();
    // 创建纹理贴图（给模型贴图）
    var textureLoader = new THREE.TextureLoader();
    var texture = textureLoader.load('image/35.jpg');
    texture.wrapS = THREE.RepeatWrapping; // 设置阵列模式
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(4, 2); // uv两个方向纹理重复数量
    texture.offset = new THREE.Vector2(0.2, 0.6) //偏移
    texture.rotation = Math.PI / 4; //旋转角度
    texture.center.set(0.5, 0.5); // 设置纹理的旋转中心，默认(0,0)
    var material = new THREE.MeshLambertMaterial({
        map: texture,
    });
    var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    mesh.rotateX(-Math.PI / 2);

    // 【纹理动画】1.创建贴图，2.设置贴图的偏移路径 3.启动requestAnimationFrame
    function textureRun() {
        var textureLoader = new THREE.TextureLoader();
        var texture2 = textureLoader.load('image/箭头.png');
        texture2.wrapS = THREE.RepeatWrapping;
        texture2.wrapT = THREE.RepeatWrapping;
        texture2.repeat.set(10, 1);
        var geometry2 = new THREE.PlaneGeometry(1000, 80);
        var material2 = new THREE.MeshLambertMaterial({
            map: texture2
        });
        var mesh2 = new THREE.Mesh(geometry2, material2);
        mesh2.position.y = 60
        scene.add(mesh2);
        return texture2
    }

    function textureRun2() {
        // 创建管道路径
        var curve = new THREE.CatmullRomCurve3([
            new THREE.Vector3(-180, -140, 0),
            new THREE.Vector3(-170, 140, 0),
            new THREE.Vector3(170, 140, 0),
            new THREE.Vector3(180, -140, 0)
        ]);
        var textureLoader = new THREE.TextureLoader();
        var texture3 = textureLoader.load('image/箭头2.png');
        texture3.repeat.set(20, 1);
        texture3.wrapS = THREE.RepeatWrapping;
        texture3.wrapT = THREE.RepeatWrapping;
        // 创建一个管道(路径，分段数，半径，圆滑分段，是否闭合)
        var tubeGeometry = new THREE.TubeGeometry(curve, 100, 20, 50, false);
        var tubeMaterial = new THREE.MeshPhongMaterial({
            map: texture3,
            transparent: true,
        });
        var tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial);
        tubeMesh.position.y = 170
        scene.add(tubeMesh);
        return texture3
    }

    // 【设置光源-聚光灯-环境光】
    let spotLight = new THREE.SpotLight(0xffffff, 1);
    let AmbientLight = new THREE.AmbientLight(0xffffff, 0.8);
    spotLight.angle = Math.PI / 6 // 设置聚光光源发散角度
    spotLight.position.set(40, 150, 80);
    scene.add(spotLight, AmbientLight);
    // 【相机设置】
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 500; //三维场景显示范围控制系数，系数越大，显示的范围越大
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000); //创建相机对象
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    //设置辅助线
    var axisHelper = new THREE.AxisHelper(700); // 辅助坐标系
    scene.add(axisHelper);
    // 【第四步：渲染对象】
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 0.5); //设置背景颜色
    renderer.shadowMap.enabled = true; //渲染阴影
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    renderer.render(scene, camera); //执行渲染操作（场景、相机）


    var needRun;
    var texture2 = textureRun();
    var tubeTexture = textureRun2()

    function render(needRun) {
        needRun = true;
        if (needRun) {
            needRun = false;
            texture2.offset.x -= 0.06; // 设置纹理偏移,动画效果
            tubeTexture.offset.x -= 0.08;
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
    }
    var controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', (e) => {
        if (needRun) {
            needRun = false
            requestAnimationFrame(render)
        }
    }, false)
    render()
</script>

</html>